<template>
    <div class="content">
		<div class="header">请绑定持卡人本人的银行卡</div>
		<div class="container">
			<div class="colmun">
				<span>持卡人</span>
				<input type="text" v-model="name" placeholder="请输入姓名">
			</div>
			<div class="colmun">
				<span>开户行</span>
				<input type="text" v-model="open_bank" placeholder="请输入开户行">
			</div>
			<div class="colmun">
				<span>支行</span>
				<input type="text" v-model="sub_branch" placeholder="请输入支行">
			</div>
			<div class="colmun">
				<span>卡号</span>
				<input type="text" v-model="bank_num" placeholder="请输入卡号">
			</div>
			<div class="colmun">
				<span>手机号</span>
				<input type="text" v-model="phone" placeholder="请输入手机号">
			</div>
		</div>
		<div class="bottom" @click="confirm">{{footer_text}}</div>
	</div>
</template>
<script>
import { Toast } from 'vant';
export default {
    data(){
        return{
          name:'',
          open_bank:'',
          sub_branch:'',
          bank_num:'',
          phone:'',
          id:-1,
          footer_text:'确认添加'
        }
    },
    mounted() {
      this.id = this.$route.query.id;
      if(this.id != -1){
        this.footer_text = '确认修改'
        this.loadData()
      }
    },
    methods: {
      loadData(){
        this.$http.post('/api/withdraw/bankInfo',{id: this.id}).then(res => {
          console.log(res)
          this.name = res.data.name;
          this.open_bank = res.data.open_bank;
          this.sub_branch = res.data.sub_branch;
          this.bank_num = res.data.bank_num;
          this.phone = res.data.phone;
        })
      },
        confirm(){
          if(this.name == ''){
            Toast.fail('请输入持卡人姓名');
            return
          }
          if(this.open_bank == ''){
            Toast.fail('请输入开户行');
            return
          }
          if(this.sub_branch == ''){
            Toast.fail('请输入支行');
            return
          }
          if(this.bank_num == ''){
            Toast.fail('请输入银行卡号');
            return
          }
          if(this.phone == ''){
            Toast.fail('请输入手机号');
            return
          }
          var data = {}
          if(this.id == -1){
            data = {
              open_bank: this.open_bank,
              sub_branch: this.sub_branch,
              bank_num: this.bank_num,
              phone: this.phone,
              name: this.name,
            };
          }else{
            data = {
              open_bank: this.open_bank,
              sub_branch: this.sub_branch,
              bank_num: this.bank_num,
              phone: this.phone,
              name: this.name,
              id: this.id
            };
          }
          
          this.$http.post('/api/withdraw/bank',data).then(res => {
            console.log(res)
            this.$router.back()
          })
        }
    },
}
</script>
<style lang="scss" scoped="scoped">
    .content {
  width: 91vw;
  margin: 0 auto;
  .header {
    margin-top: 4vw;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(153, 153, 153, 1);
  }
  .container {
    width: 91vw;
    background: rgba(255, 255, 255, 1);
    padding: 0 4vw;
    box-sizing: border-box;
    border-radius: 10px;
    .colmun {
      height: 13.33vw;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e1e1e1;
      span {
        font-size: 15px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(102, 102, 102, 1);
      }
      input {
        flex: 1;
        text-align: right;
        outline: none;
        border: none;
      }
    }
  }
  .bottom {
    width: 91vw;
    height: 10.66vw;
    background: rgba(231, 188, 134, 1);
    border-radius: 10px;
    margin: 7.33vw auto;
    line-height: 10.66vw;
    text-align: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
  }
}
</style>